import { css } from "@emotion/react";
import { SmallCloseIcon } from "@chakra-ui/icons";

import {
	Box,
	Image,
	Text,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
const quickLinkBoxCss = css`
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px soilid orange;
	float: left;
	padding-top: 20px;
	padding-bottom:40px;
	/* &:hover{
		background:rgba(0,0,0,.1)
	} */
	&:hover .more_wrap {
		display:block;
	}
	margin-right: 20px;
	cursor: pointer;
`;
const moreWrap = css`
	position:absolute;
	right:0;
	top:0;
	width:28px;
	height:28px;
	border-radius:50%;
	&:hover {
		background:rgba(255,255,255,.4);
	}
	display:block;
`;
const more = css`
	height:28px;
	vertical-align:top;
`;
const oneLineEllipsis = css`
	margin: 4px 0px;
	font-size: 12px;
	text-align: center;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
`;
const avatorCss = css`
	background-color: #eee;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	overflow: hidden;

	margin: 0 auto;

	display: flex;
	justify-content: center;
	align-items: center;

	> img {
		width: 50%;
		height: 50%;
		object-fit: container;
	}
`;
const closeIconCss = css`
	position: absolute;
	right: 0;
	top: 0;
`;
const tabs = css`
	width:128px;
	height:80px;
	text-align:center;
	position:absolute;
	top:0;
	right:0;
`;
const tabItem = css`
	line-height:30px;
	background:#ddd;
	font-size:12px;
	&:hover{
		background:#bbb;
	}
`;
export default function QuckItem({ data, index, changeStatus, onDelete }) {
	const [status,setStatus] = useState(false);
	
	const handleClick = () => {
		window.location.href = data.link;
	};
	function change(e){
		e.stopPropagation();
	};
	function remove(e){
		e.stopPropagation();
	};
	return (
		<Box css={quickLinkBoxCss}>
			<Box
				css={closeIconCss}
				padding="4px"
				// onClick={onDelete.bind(null, data)}
			>
				<Box className="more_wrap" css={moreWrap}>
					<Image css={more} onClick={changeStatus.bind(null, index)} src="/images/more.svg" />
					{
					data.status
					&&
					<Box css={tabs}>
						{/* <Text onClick={change} css={tabItem}>修改快捷方式</Text> */}
						<Text onClick={onDelete.bind(null, data)} css={tabItem}>移除</Text>
					</Box>
					}
				</Box>
				{/* <SmallCloseIcon /> */}
			</Box>
			<Box css={{ ...avatorCss }} onClick={handleClick}>
				<Image src={data.icon} />
			</Box>
			<Text css={oneLineEllipsis}>{data.name}</Text>
		</Box>
	);
}